<template>
  <div class="row padding-page justify-center">
    <div class="col-11 col-sm-12 q-px-md">
      <!-- 1. About MNVs -->
      <q-card flat bordered class="col-12 q-mt-lg" id="mnv">
        <div
          class="q-pa-sm text-subtitle2 text-bold text-primary full-width bg-secondary"
        >
          1. About MNVs
        </div>
        <div class="row q-pa-md q-my-xs text-body2 text-justify">
          <div class="col-12">
            <p>
              Multi-nucleotide variants (MNVs), defined as two or more nearby
              variants existing on the same haplotype in an individual (<span
                class="text-primary text-bold q-px-xs rounded-borders"
                >Figure 1</span
              >), are a clinically and biologically important class of genetic
              variation. Recent studies (<a
                class="text-accent"
                href="https://www.nature.com/articles/s41467-019-12438-5"
                target="_blank"
                >Wang et al. Nat Commun., 2020</a
              >) have identified millions of MNVs in human populations and
              predicted that a large number of MNVs could result in different
              impacts on protein sequences than single nucleotide variants
              (SNVs). However, the functions of MNVs, especially those in
              non-coding regions, are largely unknown. Numerous studies have
              shown that SNVs could affect regulatory elements, thereby
              influencing the expression and other molecular phenotypes.
              Therefore, we propose that MNVs can also affect molecular
              phenotypes by influencing regulatory elements, such as
              methylation, miRNA binding, and alternative splicing.
            </p>
            <div class="row justify-around">
              <div class="col-8 q-mt-sm q-mb-md text-body1">
                <q-img
                  class="col-12 col-sm-8 q-mx-auto"
                  src="/assets/help/help_mnv_define.png"
                  :ratio="4 / 3"
                  fit="scale-down"
                />
                <div class="col-12 text-center text-body2 text-primary text-bold">
                  Figure 1: Definition of MNVs and MNVQTLs
                </div>
              </div>
            </div>
            <p>
              As
              <a
                class="text-accent"
                href="https://www.nature.com/articles/s41467-019-12438-5"
                target="_blank"
                >Wang et al. (Nat Commun., 2020)</a
              >
              described, a significant drop in phasing occurs when the distance
              between variants is &gt;10 bp. We then focused on the MNVs
              with a distance &lt;10 bp. As a result, applying the method
              described by
              <a
                class="text-accent"
                href="https://www.nature.com/articles/s41467-019-12438-5"
                target="_blank"
                >Wang et al. (Nat Commun., 2020)</a
              >, we identified <span color="accent">{{ dataStat.summary.uniq_mnv }}</span> MNVs using
              the genotype data from TCGA which was imputed using
              <a
                class="text-accent"
                href="https://mathgen.stats.ox.ac.uk/impute/impute_v2.html"
                target="_blank"
                >IMPUTE2 software</a
              >
              priorly. For a certain MNV, there were 16 possible genotypes as
              shown in
              <span class="text-primary text-bold q-px-xs rounded-borders"
                >Figure 2</span
              >. For the convenience of QTL analysis, we
              <span class="text-primary text-bold rounded-borders q-px-xs"
                >recoded the genotypes of MNVs into three genotypes</span
              >.
            </p>
            <div class="col-12">
              <div class="row justify-around">
                <div class="col-5 q-mt-sm q-mb-md text-body1">
                  <q-img
                    class="col-12 col-sm-8 q-mx-auto"
                    src="/assets/help/help_genotype.png"
                    :ratio="4 / 3"
                    fit="scale-down"
                  />
                  <div class="col-12 text-center text-body2 text-primary text-bold">
                    Figure 2: Definition of MNV genotypes
                  </div>
                </div>
                <div class="col-5 q-mt-sm q-mb-md text-body1">
                  <q-img
                    class="col-12 col-sm-8 q-mx-auto"
                    src="/assets/help/help_survival_model.png"
                    :ratio="4 / 3"
                    fit="scale-down"
                  />
                  <div class="col-12 text-center text-body2 text-primary text-bold">
                    Figure 3: Three models of survival analysis
                  </div>
                </div>
              </div>
            </div>
            <p>
              Then, by integrating multi-omics data from TCGA, we systematically
              identified MNVs and analyzed their associations with six molecular
              phenotypes, including coding gene expression, miRNA expression,
              lncRNA expression, alternative splicing, methylation, and
              alternative polyadenylation (APA). Significant associations
              between MNVs and molecular phenotypes are defined as MNV
              <span class="bg-orange-6 rounded-borders text-white q-px-xs"
                >apaQTL</span
              >
              (MNVs vs APA),
              <span class="bg-light-blue-6 rounded-borders text-white q-px-xs"
                >sQTL</span
              >
              (MNVs vs splicing),
              <span class="bg-purple-6 rounded-borders text-white q-px-xs"
                >meQTL</span
              >
              (MNVs vs methylation),
              <span class="bg-red-6 rounded-borders text-white q-px-xs"
                >eQTL</span
              >
              (MNVs vs coding gene expression),
              <span class="bg-teal-6 rounded-borders text-white q-px-xs"
                >lncRNA-eQTL</span
              >
              (MNVs vs lncRNA expression), and
              <span class="bg-light-green-6 rounded-borders text-white q-px-xs"
                >miRNA-eQTL</span
              >
              (MNVs vs miRNA expression).
            </p>
            <p>
              Furthermore, Pancan-MNVQTLdb is also interested in the MNVQTLs which located in GWAS loci or associated with patient survival time. By mapping MNVQTLs with GWAS loci, MNVQTLs located in GWAS linkage disequilibrium (LD) regions were defined as disease/trait related-MNVQTLs. To explain the potential association between MNVs genotypes and patient survival time, we adopted three genetic models to assess the effect of MNVs on cancer prognosis. The three models we used to perform survival analysis are described as follows:
            </p>
            <p class="q-my-none">
              <ol class="q-my-none">
              <li class="q-pa-xs">
              the additive model (<span
                class="text-primary text-bold q-px-xs rounded-borders"
                >Figure 3a</span
              >), which compares the survival time among the three different
              genotype groups; </li>
              <li class="q-pa-xs">
              the recessive model (<span
                class="text-primary text-bold q-px-xs rounded-borders"
                >Figure 3b</span
              >), in which the survival time in genotype 2 (homozygous mutation)
              was compared with the other two genotype groups, and </li>
              <li class="q-pa-xs">
              the dominant model
              (<span class="text-primary text-bold q-px-xs rounded-borders"
                >Figure 3c</span
              >), in which the survival time in genotype 0 (homozygous wildtype)
              was compared with the other two genotype groups.</li>
              </ol>
            </p>
          </div>
        </div>
      </q-card>
      <!-- about Pancandatabase -->
      <q-card flat bordered class="col-12 q-mt-lg full-width" id="mnv">
          <div
            class="q-pa-sm text-subtitle2 text-bold text-primary full-width bg-secondary"
          >
          2. About Pancan-MNVQTLdb
          </div>
          <div class="row q-pa-md q-my-sm text-body2 text-justify">
          <div class="col-12">
          <p class="q-mt-none">
            Pancan-MNVQTLdb includes <span class="text-primary text-bold q-px-xs rounded-borders"
              >{{ dataStat.summary.cis_qtl }}</span> cis-MNVQTLs and <span class="text-primary text-bold q-px-xs rounded-borders"
              >{{ dataStat.summary.trans_qtl }}</span> trans-MNVQTLs in total. By mapping MNVQTLs with GWAS loci, we obtained <span class="text-primary text-bold q-px-xs rounded-borders"
              >{{ dataStat.summary.gwas }}</span> MNVQTLs located in GWAS LD regions. By integrating MNVs with clinical survival data, we also identified <span class="text-primary text-bold q-px-xs rounded-borders"
              >{{ dataStat.survival.either }}</span> survival-related MNVQTLs, and the data size of Pancan-MNVQTLdb is shown below.
          </p>
          <p>
            Pancan-MNVQTLdb is a user-friendly database providing a comprehensive resource of MNVQTLs across 33 human cancer types. We are committed to helping researchers investigate the biological
            mechanisms of causal variants and guide the direction of functional validation.
          </p>
          </div>
          <div class="col-12">
            <DataCount/>
          </div>
          </div>
      </q-card>
      <!-- 2.data -->
      <q-card flat bordered class="col-12 q-mt-lg" id="pipeline">
        <div
          class="q-pa-sm text-subtitle2 text-bold text-primary full-width bg-secondary"
        >
          3. Analysis pipeline
        </div>
        <div class="row justify-center q-pa-md q-my-sm text-body1">
          <q-img
            class="row col-12 col-sm-10"
            src="/assets/help/help_pipeline.png"
            fit="scale-down"
          />
        </div>
      </q-card>
      <!-- 3.intro -->
      <q-card flat bordered class="col-12 q-mt-lg" id="introduction">
        <div
          class="q-pa-sm text-subtitle2 text-bold text-primary full-width bg-secondary"
        >
          3. Web introduction
        </div>
        <div class="row col-12 q-pa-md q-my-sm text-body1 text-justify">
          <!-- 主页 -->
          <div class="row col-12">
            <q-img
              class="col-12 col-sm-8 q-mt-lg q-mb-sm q-mx-auto"
              src="/assets/help/help_home.png"
              fit="scale-down"
            >
            </q-img>
            <div class="col-12 text-center text-primary text-bold text-body2">Home Page</div>
          </div>
          <!-- 聚合查询 -->
          <div class="row col-12">
            <div class="row col-12 col-sm-5 q-mt-lg q-mb-sm q-mx-auto">
              <q-img
                src="/assets/help/help_agg_1.png"
                class="col-12"
                fit="scale-down"
              >
              </q-img>
              <div class="col-12 text-center text-primary text-bold text-body2">Aggregate search (Top)</div>
            </div>
            <div class="row col-12 col-sm-5 q-mt-lg q-mb-sm q-mx-auto">
              <q-img
                class="col-12"
                src="/assets/help/help_agg_2.png"
                fit="scale-down"
              >
              </q-img>
              <div class="col-12 text-center text-primary text-bold text-body2">Aggregate search (Bottom)</div>
            </div>
          </div>
          <!-- 各种QTL的查询 -->
          <div class="row col-12">
            <q-img
              class="col-12 col-sm-8 q-mt-lg q-mb-sm q-mx-auto"
              src="/assets/help/help_cis.png"
              fit="scale-down"
            >
            </q-img>
            <div class="col-12 text-center text-primary text-bold text-body2">Cis/trans QTL</div>
          </div>
          <div class="row col-12">
            <q-img
              class="col-12 col-sm-8 q-mt-lg q-mb-sm q-mx-auto"
              src="/assets/help/help_survival.png"
              fit="scale-down"
            >
            </q-img>
            <div class="col-12 text-center text-primary text-bold text-body2">Survival-QTLs</div>
          </div>
          <div class="row col-12">
            <q-img
              class="col-12 col-sm-8 q-mt-lg q-mb-sm q-mx-auto"
              src="/assets/help/help_gwas.png"
              fit="scale-down"
            >
            </q-img>
            <div class="col-12 text-center text-primary text-bold text-body2">GWAS-QTLs</div>
          </div>
        </div>
      </q-card>
      <q-card flat bordered class="col-12 q-mt-lg" id="gwas">
        <div
          class="q-pa-sm text-subtitle2 text-bold text-primary full-width bg-secondary"
        >
          4. Contact
        </div>
        <q-card-section class="row col-12 justify-around text-h6">
          <!-- 人物1 -->
          <q-card class="col-12 col-sm-5 col-md-5 q-my-md q-pa-md">
            <q-card class="text-center text-h5"
              >Gong, Jing
              <q-badge class="q-mx-xs" align="middle" color="green-5"
                >Ph.D</q-badge
              >
              <div>
                <q-badge class="q-mx-xs" align="middle" color="orange-5"
                  >Professor</q-badge
                >
              </div></q-card
            >
            <q-card class="text-body1">
              <div class="row no-wrap q-py-xs">
                <div class="col-auto"><q-icon name="email" size="sm" /></div>
                <div class="col-auto q-pl-md">
                  <img
                    src="/assets/help/email_gongjing.png"
                    style="margin: auto 0; height: 1.2em"
                  />
                </div>
              </div>
              <div class="row no-wrap q-py-xs">
                <div class="col-auto"><q-icon name="badge" size="sm" /></div>
                <div class="col-auto q-pl-md">
                  <a href="http://encoi.hzau.edu.cn/" target="_blank"
                    >College of Informatics</a
                  >
                </div>
              </div>
              <div class="row no-wrap q-py-xs">
                <div class="col-auto"><q-icon name="school" size="sm" /></div>
                <div class="col-auto q-pl-md">
                  <a href="http://www.hzau.edu.cn/en/HOME.htm" target="_blank"
                    >Huazhong Agricultural University, Wuhan 430074 P.R.
                    China</a
                  >
                </div>
              </div>
            </q-card>
          </q-card>
          <!-- 人物2 -->
          <q-card class="col-12 col-sm-5 col-md-5 q-my-md q-pa-md">
            <!-- 标题 -->
            <q-card class="text-center text-h5"
              >Wang, Dongyang
              <div>
                <q-badge class="q-mx-xs" align="middle" color="orange-5"
                  >Ph.D candidate</q-badge
                >
              </div></q-card
            >
            <!-- 信息 -->
            <q-card class="text-body1">
              <!-- 邮箱 -->
              <div class="row no-wrap q-py-xs">
                <div class="col-auto"><q-icon name="email" size="sm" /></div>
                <div class="col-auto q-pl-md">
                  <img
                    src="/assets/help/email_wdy.png"
                    style="margin: auto 0; height: 1em"
                  />
                </div>
              </div>
              <div class="row no-wrap q-py-xs">
                <div class="col-auto"><q-icon name="badge" size="sm" /></div>
                <div class="col-auto q-pl-md">
                  <a href="http://encoi.hzau.edu.cn/" target="_blank"
                    >College of Informatics</a
                  >
                </div>
              </div>
              <div class="row no-wrap q-py-xs">
                <div class="col-auto"><q-icon name="school" size="sm" /></div>
                <div class="col-auto q-pl-md">
                  <a href="http://www.hzau.edu.cn/en/HOME.htm" target="_blank"
                    >Huazhong Agricultural University, Wuhan 430074 P.R.
                    China</a
                  >
                </div>
              </div>
            </q-card>
          </q-card>
        </q-card-section>
      </q-card>
    </div>
  </div>
</template>

<script setup>
import DataCount from 'components/DataCount.vue';
import { getDataCounts } from 'src/boot/dataCount';

const dataStat = getDataCounts()
</script>

<style scoped lang="scss">
a,
a:link,
a:visited,
a:active {
  text-decoration: none;
  color: var(--q-foreground);
}

a:hover {
  text-decoration: underline;
  color: var(--q-primary);
}
.q-table th {
  font-size: unset;
  font-weight: unset;
}
</style>
